#@ucenter_layout()

#define script()
<script>

    $(document).ready(function () {
        $("[name='paytype']:first").attr("checked", "checked");
    });

    function ok(data) {
        if (isMobileBrowser()) {
            location.href = data.gotoUrl;
        } else {
            window.open(data.gotoUrl, '_blank')
        }
    }

</script>
#end
#define css()
<style>
    .member-info{
        font-size: 14px;
    }
    .col-form-label{
        font-weight: 500;
    }
    .radio label{
        margin:0;
    }

</style>
#end

#define content()
<section class="content">

    <div class="container-fluid">
        <div class="card card-outline card-primary">

            <!-- form start -->
            <form class=" autoAjaxSubmit" autocomplete="off" action="#(CPATH)/ucenter/member/joining" method="post"
                  method="post"
                  data-ok-function="ok"
            >
                <input type="hidden" name="groupId" value="#(memberGroup.id)">
                <div class="card-body">

                    <h4 class="form-header">基本介绍</h4>

                    <div class="form-group row" style="align-items: center;">
                        <label class="col-2 col-form-label">会员名称</label>
                        <div class="col-10 member-info">
                            #(memberGroup.title ??)
                        </div>
                    </div>


                    <div class="form-group row" style="align-items: center;">
                        <label class="col-2 col-form-label">加入费用</label>
                        <div class="col-10 member-info">
                            #number(memberGroup.price,'0.00') 元 / #(memberGroup.valid_term) 天
                        </div>
                    </div>


                    <div class="form-group row"  style="align-items: center;">
                        <label class="col-2 col-form-label">会员简介</label>
                        <div class="col-10 member-info">
                            #(memberGroup.summary ??)
                        </div>
                    </div>


                    <h4 class="form-header">支付方式</h4>

                    <div class="form-group row" style="align-items: center">
                        <label class="col-2 col-form-label">支付类型</label>

                        <div class="col-10 member-info">

                            #if(wechatxConfig.isEnable())
                            <div class="radio">
                                <label>
                                    <input type="radio" name="paytype" value="wechatx">
                                    微信转账
                                </label>
                            </div>
                            #end

                            #if(alipayxConfig.isEnable())
                            <div class="radio">
                                <label>
                                    <input type="radio" name="paytype" value="alipayx">
                                    支付宝转账
                                </label>
                            </div>
                            #end

                            #if(wechatConfig.isEnable())
                            <div class="radio">
                                <label>
                                    <input type="radio" name="paytype" value="wechat">
                                    微信支付
                                </label>
                            </div>
                            #end

                            #if(alipayConfig.isEnable())
                            <div class="radio">
                                <label>
                                    <input type="radio" name="paytype" value="alipay">
                                    支付宝支付
                                </label>
                            </div>
                            #end

                            #if(paypalConfig.isEnable())
                            <div class="radio">
                                <label>
                                    <input type="radio" name="paytype" value="paypal">
                                    Paypal支付
                                </label>
                            </div>
                            #end

                            <div class="radio">
                                <label>
                                    <input type="radio" name="paytype" value="amount">
                                    使用账户余额支付
                                </label>
                            </div>

                        </div>
                    </div>


                </div>

                <div class="card-footer">
                    <div class="offset-sm-2 col-sm-10 submit-block">
                        <div class="card-submit">
                            <button type="submit" class="btn btn-primary">下一步</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

</section>

#end
